<template>
	<view class="content">
		<view class="bgCam"></view>
		<view class="todo-header">
			<!-- 状态栏左侧 -->
			<view class="todo-header_left">
				<text class="active-text">{{ text }}</text>
				<text>{{ listData.length }}条</text>
				<text> 前腰能力训练</text>
			</view>
			<!-- 状态栏右侧 -->
			<view class="todo-header_right" v-for="(item, index) in tabList" :key="index">
				<view class="todo-header_right-item" :class="{ 'active-tab': tabIndex == index }"
					@click="tabClick(item, index)">{{ item }}</view>
			</view>
		</view>
		<view class="todo-content" v-for="(item, index) in listData" :key="item.title">
			<view class="todo-list" :class="{ 'todo--finish': item.selection }" @click="childItem(item, index)">
				<view class="todo-list_checkbox">
					<view class="checkbox"></view>
				</view>
				<view class="todo-list_content">{{ item.title }}</view>
			</view>
		</view>
		<!-- 字体图标 -->
		<view class="create-todo" @click="creat"><text class="iconfont iconhao1"
				:class="{ 'create-todo-active': tetxShow }"></text></view>
		<!-- 输入框 -->
		<view class="create-content" v-if="activeInput" :class="{ 'create-show': tetxShow }">
			<view class="create-content-box">
				<view class="create-input"><input type="text" v-model="InputValue" placeholder="请输入你要创建的todo" /></view>
				<view class="creat-button" @click="submitInput">创建</view>
			</view>
			<view class="new-button">
			</view>
		</view>
		<navigator url="/pages/trainning/trainning">
			<button @click="enterMain">进入排行榜</button>
		</navigator>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../../tool/tool';
	const app = getApp();
	const account=123;
	export default {
		
		data() {
			return {
				InputValue: '',
				activeInput: false,
				tabIndex: 0,
				tetxShow: false,
				score:1,
				text: '全部',
				tabList: ['全部', '待办', '已完成'],
				list: [],
				// list: [{
				// 		title: '颠球球感训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '长传球训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '短传球训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '一对一过人训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '观察训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '传球决策训练',
				// 		select: false
				// 	},
				// 	{
				// 		title: '健身房力量训练',
				// 		select: false
				// 	}
				// ]
				//     ]
			};
		},
		onShow() {
			uni.request({
				url: baseUrl + "/Tran/getUserTodayTran?userID=" + account,
				method: "GET",
				success:(res)=>{
					console.log(res.data)
					if (!Array.isArray(res.data)) {
						// 这里假设 res.data 是一个对象，我们需要将它放入一个数组中  
						// 注意：如果服务器应该返回数组但返回了对象，这可能是一个错误，应该与后端开发人员确认  
						this.list = [res.data]; // 将对象放入数组中  
					} else {
						this.list = res.data; // 如果已经是数组，则直接赋值  
					}
					console.log(this.list);
				}
			})
		},
		computed: {
			listData() {
				let list = JSON.parse(JSON.stringify(this.list));
				let newList = [];
				if (this.tabIndex === 0) {
					return list;
				} else if (this.tabIndex === 1) {
					list.forEach(v => {
						if (!v.select) {
							newList.push(v);
						}
					});
					return newList;
				} else if (this.tabIndex === 2) {
					list.forEach(v => {
						if (v.select) {
							newList.push(v);
						}
					});
					return newList;
				}
			}
		},
		methods: {
			tabClick(item, index) {
				this.text = item;
				this.tabIndex = index;
			},
			childItem(item, index) {
				this.list[index].selection = !this.list[index].selection;
				if(this.list[index].selection==false){
					this.list[index].score=-1
				}
				else{
					this.list[index].score=1
				}
				uni.request({
					url:baseUrl+"/Tran/finishTran?account="+account+"&title="+this.list[index].title,
					method:"GET",
					success() {
						console.log("success")
					}
				})
				uni.request({
					url:baseUrl+"/UserAccount/setScore?account="+account+"&score="+this.list[index].score,
					method:"GET",
					success() {
						console.log("success_log")
					}
				})
				
			},
			creat() {
				if (this.activeInput) {
					this.close();
				} else {
					this.open();
				}
			},
			open() {
				this.activeInput = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.tetxShow = true;
					}, 50);
				});
			},
			close() {
				this.tetxShow = false;
				this.$nextTick(() => {
					setTimeout(() => {
						this.activeInput = false;
					}, 350);
				});
			},
			submitInput() {
				if (this.InputValue === '') {
					uni.showToast({
						title: '输入的内容不能为空',
						icon: 'none'
					});
				} else {
					this.list.unshift({
						title: this.InputValue,
						selection: false
					});
					uni.request({
						url:baseUrl+"/Tran/addTran",
						method:"POST",
						data:{
							userID:account,
							title:this.InputValue,
							isFinish:false,
							selection:false,
							position:"cam",
						}
					})
					this.InputValue = '';
					this.close();
				}
			},
			enterMain() {

			}
		}
	};
</script>

<style scoped>
	.bgCam {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
			z-index: -1;
		}
	.todo-header {
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 12px;
		color: #333;
		height: 45px;
		box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.todo-header_left {
		width: 100%;
	}

	.active-text {
		font-size: 14px;
		color: #279abf;
		padding-right: 10px;
	}

	.todo-header_right {
		display: flex;
		flex-shrink: 0;
	}

	.todo-header_right-item {
		padding: 0 5px;
	}

	.active-tab {
		color: #279abf;
	}

	.todo-content {
		position: relative;
	}

	.todo-list {
		position: relative;
		display: flex;
		align-items: center;
		padding: 15px;
		margin: 15px;
		color: #0c3854;
		font-size: 14px;
		border-radius: 10px;
		background: #cfebfd;
		box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.1), -1px 2px 1px 0 rgba(255, 255, 255) inset;
		overflow: hidden;
	}

	.todo-list::after {
		position: absolute;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		width: 5px;
		background: #91d1e8;
	}

	.todo-list_checkbox {
		padding-right: 15px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	}

	.todo--finish .checkbox {
		position: relative;
		background: #eee;
	}

	.todo--finish .checkbox::after {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		margin: auto;
		background: #cfebfd;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
	}

	.todo--finish .todo-list_content {
		color: #999;
	}

	.todo--finish.todo-list:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40px;
		right: 10px;
		height: 2px;
		margin: auto 0;
		background: #bdcdd8;
	}

	.todo--finish.todo-list:after {
		background: #ccc;
	}

	.create-todo {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #deeff5;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
	}

	.iconhao1 {
		font-size: 30px;
		color: #add8e6;
	}

	.create-content {
		position: fixed;
		bottom: 95px;
		left: 20px;
		right: 20px;
		transition: all 0.3s;
		opacity: 0;
		transform: scale(0) translateY(200%);
	}

	.create-show {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	.create-content-box {
		display: flex;
		align-items: center;
		padding: 0 15px;
		padding-right: 0;
		border-radius: 50px;
		background: #deeff5;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
		z-index: 2;
	}

	.create-input {
		width: 100%;
		padding-right: 15px;
		color: #add8e6;
	}

	.creat-button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		height: 50px;
		width: 80px;
		border-radius: 50px;
		font-size: 16px;
		color: #88d4ec;
		box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);
	}

	.create-content:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		width: 20px;
		height: 20px;
		background: #deeff5;
		transform: rotate(45deg);
		margin: 0 auto;
		box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
		z-index: -1;
	}

	.create-content-box:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		width: 20px;
		height: 20px;
		background: #deeff5;
		transform: rotate(45deg);
		margin: 0 auto;
	}

	.iconhao1 {
		transition: transform 0.3s;
	}

	.create-todo-active {
		transform: rotate(135deg);
	}
</style>